
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Creating a widget plugin</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style>
#demo {
    width: 50em;
}
.yui3-widget-content {
    border:1px solid #000;
    padding:1em;
}
.yui3-tab-loading {
    background: #fff url(http://developer.yahoo.com/yui/3/examples/overlay/assets/img/ajax-loader.gif) no-repeat center center;
    height:40px;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Creating a widget plugin</h1>

<div class="exampleIntro">
	<p>This example shows how you can use Widget's plugin infrastructure to add
additional features to an existing widget.</p>
<p>We create an IO plugin class for <code>Widget</code> called
<code>WidgetIO</code>. The plugin adds IO capabilities to the Widget,
which, by default, outputs to the <code>Widget</code>'s <code>contentBox</code>.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo"></div>
<script type="text/javascript">
YUI().use("widget", "gallery-widget-io", function(Y) {
    var widget = new Y.Widget();

    widget.plug(Y.Plugin.WidgetIO, {
        uri : 'assets/news.php?query=web+browser',
        loading: '<img class="yui3-loading" width="32px" height="32px" src="assets/img/ajax-loader.gif">'
    });

    widget.render('#demo');
    widget.io.refresh();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
